<template>
	<view class="generateInvitation" :data-theme="theme" :class="theme" :style="globalColor.style">
		<HeadCustom title="生成邀请函" :isSpace="true" :isAppBtn="false" :isHome="false"></HeadCustom>
		<view class="content_main">
			<text class="style_txt font32">选择邀请函样式</text>
			<view class="img_box">
				<view class="img_detail" v-for="(item, index) in imgList" :key="index">
					<img @click="selectImg(item)" :src="item.image" alt="" />
					<text class="font32">{{ item.name }}</text>
					<!-- <image class="selectImg" :src="item.click ? imgObj.click : imgObj.noclick"></image> -->
					<image
						@click="selectImg(item)"
						v-if="item.click"
						class="selectImg"
						src="https://ebc-prod.cdn.benwunet.com/uni-static/h5/selectFs1.png"
						mode="aspectFill"
					></image>
					<image @click="selectImg(item)" v-else class="selectImg" src="https://ebc-prod.cdn.benwunet.com/uni-static/img3.3.0/mine/selectFs2.png" mode="aspectFill"></image>
				</view>
			</view>
			<view class="music_btn">
				<text class="font32">自动播放背景音乐</text>
				<u-switch
					:size="20"
					v-model="detail.autoplayMusic"
					:activeValue="1"
					:inactiveValue="0"
					activeColor="rgba(255,217,181,0.1)"
					inactiveColor="#1a1d25"
					@change="changeSwitch"
				></u-switch>
			</view>
		</view>
		<BottomBtn ref="bottomBtnRef" title="确定" @btnClick="btnClick"></BottomBtn>
	</view>
</template>

<script>
import BottomBtn from '@/components/bottom-btn/index.vue';
import { conferenceTemplate, createInvitation } from '@/api/h5.js';
export default {
	components: { BottomBtn },
	data() {
		return {
			theme: getApp().globalData.appTheme,
			globalColor: getApp().globalData.globalColor,
			detail: {
				autoplayMusic: 0,
				templateId: ''
			},
			imgObj: {
				click: 'https://ebc-prod.cdn.benwunet.com/uni-static/h5/selectFs1.png',
				noclick: 'https://ebc-prod.cdn.benwunet.com/uni-static/h5/selectFs2.png'
			},
			conferenceId: '',
			imgList: []
		};
	},
	onLoad(option) {
		this.conferenceId = option.conferenceId;
		this.getTemplate();
	},
	methods: {
		// 确定
		btnClick() {
			uni.showLoading({
				title: '生成中...',
				mask: true
			});
			const obj = {
				autoplayMusic: this.detail.autoplayMusic,
				conferenceId: this.conferenceId,
				templateId: this.detail.templateId
			};
			createInvitation({ ...obj })
				.then(res => {
					uni.showToast({
						title: '生成成功',
						icon: 'none'
					});
					const data = {
						conferenceId: this.conferenceId
					};
					this.$pageTo('/bwSign/invitationLetter', data, 'redirectTo');
				})
				.finally(() => {
					uni.hideLoading();
				});
		},
		// 是否自动播放音乐
		changeSwitch(data) {
			console.log(data);
		},
		// 选中模板
		selectImg(data) {
			this.imgList.forEach(item => {
				if (item.id == data.id) {
					item.click = true;
					this.detail.templateId = data.id;
				} else {
					item.click = false;
				}
			});
		},
		//获取邀约模板
		getTemplate() {
			conferenceTemplate({}).then(res => {
				if (res.data) {
					res.data.forEach((item, index) => {
						if (index == 0) {
							item.click = true;
							this.detail.templateId = item.id;
						} else {
							item.click = false;
						}
					});

					this.imgList = res.data;
				}
			});
		}
	}
};
</script>

<style scoped lang="scss">
::v-deep .u-switch__node {
	background-color: #9da4b5;
}
::v-deep .u-switch__node--on {
	background-color: var(--selectedFontColor);
}
.generateInvitation{
	height: 100vh;
}
.content_main {
	padding: 24rpx;
	.style_txt {
		font-weight: 600;
		color: var(--titleFontColor);
	}

	.img_box {
		margin: 34rpx 0 74rpx 0;
		display: grid;
		grid-template-columns: repeat(auto-fill, minmax(25%, 1fr));
		grid-template-rows: repeat(auto-fill, 350rpx);
		gap: 40rpx 20rpx;
		.img_detail {
			text-align: center;
			display: flex;
			flex-direction: column;
			position: relative;
			height: 350rpx;
			.selectImg {
				width: 30rpx;
				height: 30rpx;
				position: absolute;
				right: 10rpx;
				top: 10rpx;
			}
			> img {
				border-radius: 12rpx;
				height: calc(100% - 46rpx);
				object-fit: cover;
			}
			> text {
				margin-top: 18rpx;
				color: var(--contentFontLightColor);
				line-height: 44rpx;
			}
		}
	}
	.music_btn {
		background: var(--viewBgColor);
		border-radius: 12rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 20rpx 20rpx;
		> text {
			color: var(--contentFontLightColor);
		}
	}
}
</style>
